<template>

  <div class="User">
    <el-form  :label-position="labelPosition"
              label-width="80px"
              :model="userForm"  :rules="rule"
              ref="userForm"
            >
    <el-col :span="12">
      <div class="userForm">
      <h1>基本信息</h1>
      <div class="upImg">
      <el-form-item >
        <el-upload
          ref="upload"
          action="/user/addImg"
          accept="image/png,image/gif,image/jpg,image/jpeg"
          list-type="picture-card"
          :limit="1"
          :auto-upload="true"
          :http-request="customUpload"
          >
          <img id="giftImg" v-if="userForm.img" :src="userForm.img" auto-complete="off"  style="max-width:100%;max-height:100%">
          <el-button v-else slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      </div>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          type="text"
          v-model.number="userForm.phone"
          placeholder="手机号码"
          :disabled="true"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input
          type="text"
          v-model="userForm.name"
          placeholder="昵称">
        </el-input>
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input
          type="text"
          v-model="userForm.email"
          placeholder="邮箱地址">
        </el-input>
      </el-form-item>
      <el-form-item label="性别" class="sex"  >
        <el-radio v-model="userForm.sex" :label="0" size="small" border>男</el-radio>
        <el-radio v-model="userForm.sex" :label="1" size="small" border>女</el-radio>
      </el-form-item>
      <el-form-item label="出生日期" class="sex">
      <el-date-picker
        v-model="userForm.birthday"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      </el-form-item>
      <el-form-item label="注册时间" class="sex" >
        <el-date-picker
          v-model="userForm.createTime"
          type="date"
          placeholder="选择日期"
          :disabled="true">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="submitForm">
        <el-button
          type="success"
          class="submitBtn"
          round
          @click.native.prevent="editUser"
        >
          修改基础信息
        </el-button>
      </el-form-item>
      </div>
    </el-col>
    </el-form>

      <el-col :span="1">&nbsp</el-col>

      <el-col :span="11">
        <div class="editPassword">
        <el-form  :label-position="labelPosition"
                  label-width="80px"
                  :model="userForm"  :rules="rule"
                  ref="editPasswordForm"
        >
          <h1>修改密码</h1>
          <el-form-item label="旧密码" prop="plaintext">
            <el-input
              type="password"
              v-model="userForm.plaintext"
              placeholder="旧密码">
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              type="password"
              v-model="userForm.password"
              placeholder="新密码">
            </el-input>
          </el-form-item>
          <el-form-item label="密码确认" prop="confirmpassword">
            <el-input
              type="password"
              v-model="userForm.confirmpassword"
              placeholder="密码确认">
            </el-input>
          </el-form-item>
          <el-form-item >
            <el-button
              type="success"
              class="submitBtn"
              round
              @click.native.prevent="editPassword"
            >
              确认修改
            </el-button>
            <el-button
              type="primary"
              class="resetBtn"
              round
              @click.native.prevent="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
        </div>
      </el-col>
  </div>
</template>

<script>
  export default {
    name: "User",
    data() {
      let confirmpasswordCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码是必须的'))
        } else if (value !== this.userForm.password) {
          return callback(new Error('两次输入的密码不一致'))
        } else {
          return callback()
        }
      }
      return {
        labelPosition:'right',
        userForm: {
          id:null,
          name: '',
          password: '',
          confirmpassword: '',
          plaintext:'',
          phone:null ,
          email: '',
          img:'',
          sex:0,
          birthday:'',
          createTime:''
        },
        rule: {
          name: [
            {
              required: true,
              max: 14,
              min: 5,
              message: '昵称是必须的，长度为5-14位',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              max: 32,
              min: 6,
              message: '密码是必须的,长度为6-32位',
              trigger: 'blur'
            }
          ],
          confirmpassword: [
            {
              required: true,
              validator: confirmpasswordCheck,
              trigger: 'blur'
            }
          ],
          email: [
            {
              required: true,
              message: '邮箱是必须的！',
              trigger: 'blur'
            },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: 'blur' }
          ],
          plaintext:[
            {
              required: true,
              max: 32,
              min: 6,
              message: '密码是必须的,长度为6-32位',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    created:function () {
      this.getUser()
    },
    methods: {
      customUpload(params) {
        let param = new FormData()
        param.append('file',params.file)
        // 自定义上传
        this.$api.user.addImg(param).then((res) => {
          console.log(res.msg)
          this.userForm.img = res.msg;
          this.$store.state.img = res.msg;
          sessionStorage.setItem("img",res.msg);
          this.$refs.upload.clearFiles()
        })
      },
      getUser(){
        this.$api.user.getUser().then((res)=>{
          console.log(res.data);
          this.userForm.id = res.data.id;
          this.userForm.img = res.data.img;
          this.userForm.birthday = res.data.birthday;
          this.userForm.sex = res.data.sex;
          this.userForm.email = res.data.email;
          this.userForm.phone = res.data.phone;
          this.userForm.name = res.data.name;
          this.userForm.createTime = res.data.createTime;
        })
      },
      editUser(){
        this.$refs.userForm.validate(valid => {
          if (valid) {
            let params = Object.assign({}, this.userForm);
            this.$api.user.editUser(params).then((res) => {
              if (res.code != '401') {
                console.log("修改用户信息成功")
                this.$message.success("修改用户信息成功!")
              }
            })
          }
        })
      },
      editPassword(){
        this.$refs.editPasswordForm.validate(valid => {
          if(valid) {
            let params = Object.assign({}, this.userForm);
            this.$api.user.editPassword(params).then((res) => {
              console.log('code' + res.code)
              if (res.code == '200') {
                this.reset();
                console.log("修改密码成功")
                this.$message.success("修改密码成功!")
              } else {
                this.$message.error(res.msg);
              }
            })
          }
        })
      },
      reset () {
        this.userForm.password = '';
        this.userForm.plaintext = '';
        this.userForm.confirmpassword = '';
      },
      }
  }
</script>

<style scoped lang="scss">
  .User{
  }
  .document-aside {
    height: 500px;
    margin-top: 10px;
  }
  .sex {
    text-align: left;
  }
.submitBtn{
  width: 150px;

}
  .submitForm{
    text-align: right;
  }
  .avatar {
    margin-right: 80px;

  }
  .userForm {
    margin: 20px auto;
    /*width: 310px;*/
    background: #fff;
    box-shadow: 0 0 2px #B4BCCC;
    padding: 20px 30px 20px 20px;
    border-radius: 5px;
  }
  .editPassword {
    margin: 20px auto;
    /*width: 310px;*/
    background: #fff;
    box-shadow: 0 0 2px #B4BCCC;
    padding: 20px 30px 10px 30px;
    border-radius: 5px;
  }
.upImg {
  padding-right: 80px;
}
</style>
